<template>
  <div>
    <h1>网易云音乐</h1>
    <h1 ref="zhou">周杰伦 7月15</h1>
    <button @click="test">测试</button>
    <hr />
    <music-hot ref="myhot"></music-hot>
  </div>
</template>
<script>
import musicHot from './music-hot.vue'
// 首次进入组件 触发前4个生命周期
// 父子组件的执行顺序 父组件的前3个生命周期 执行子组件的前4个生命周期
// 执行父组mouned
// keepAlive 后的生命周期
// 首次进入 触发前4个生命周期
//除首次外 进入只触发activated 离开触发deactivated

export default {
  data () {
    return {
      zhou: '',
      hot: ''
    }
  },
  components: { musicHot },
  beforeCreate () {
    console.log('创建前')
    //组件创建前 未挂载根元素 data methods等未初始化完成 无法操作dom
  },
  created () {
    console.log('创建后')
    //组件创建后 data methods 初始化完毕 无法操作dom
  },
  beforeMount () {
    console.log('挂载前 ')
    // 组件挂载前 data methods 初始化完毕 无法操作dom
  },
  mounted () {
    console.log('挂载后 ')
    // 组件挂载后   data methods 初始化完毕 可以操作dom
    // ref 标注dom元素或组件
    // this.$refs.名称  获取dom元素 或组件
    this.zhou = this.$refs.zhou
    this.zhou.style.color = 'red'
    // 获取子组件
    this.hot = this.$refs.myhot
  },
  activated () {
    console.log('组件激活')
  },
  deactivated () {
    console.log('组件离开')
  },
  beforeUpdate () {
    //组件更新前
    //只有发生数据改变 不触发
    // 数据改变 触发了视图的更新 才触发
  },
  updated () {
    //组件更新后
  },
  beforeDestroy () {
    // 组件销毁前  移除绑定的一些事件，传递参数 等
  },
  destroyed () {
    // 组件销毁后
  },
  methods: {
    test () {
      this.hot.music = '音乐年榜'
      this.hot.sing('孤勇者')
    }
  }
}
</script>
